<template>
    <uv-overlay :show="preview.show" @click="preview.closePreview" :zIndex="1080" opacity="1">
        <view class="swiper">
            <view class="swiper-dots">{{ preview.index + 1 }}/{{ preview.images?.length }}</view>
            <swiper class="swiper-box" @change="preview.imageChange" circular :current="preview.index">
                <swiper-item v-for="(item, index) in preview.images" :key="index" class="uni-swiper-item">
                    <image mode="aspectFit" class="nut-swiper-img" :src="item" lazy-load observeLazyLoad></image>
                </swiper-item>
            </swiper>
            <!-- <view class="bottom">
              <uv-icon name="close-circle" :color="app.globalData.primaryColor" size="30"></uv-icon>
            </view> -->
        </view>
    </uv-overlay>
</template>

<script setup>
import { ref, reactive, } from "vue";
const app = getApp()
const preview = reactive({
    show: false,
    images: [],
    index: 0,
    imageChange(e) {
        preview.index = e.detail.current;
    },
    closePreview() {
        app.vibrate()
        preview.show = false
    }
})
const open = (value, index) => {
    console.log(value, index);
    app.vibrate()
    if (value) {
        preview.show = true
        preview.images = value
        preview.index = index || 0
    }
}
// 输出组件的方法，让外部组件可以调用
defineExpose({
    open,
})
</script>

<style lang="scss" scoped>
.swiper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    .uni-swiper__warp,
    .swiper-box {
        width: 100%;
        height: 100%;
    }
    .swiper-dots {
        color: whitesmoke;
        margin-top: 20%;
        font-size: 20px;
    }
    .bottom{
        margin-bottom: 20%;
    }

    ::v-deep {

        nut-swiper,
        .nut-swiper,
        .nut-swiper-inner {
            width: 100% !important;
            height: 100% !important;
            position: absolute;
        }
    }
    .nut-swiper-img {
        width: 100%;
        height: 100%;
        border-radius: $uni-border-radius-lg;
    }
}
</style>